<template>
  <div>
    <preHeader></preHeader>
    <div class="top-block"></div>
    <mt-field label="姓名" placeholder="请输入姓名" v-model="username"></mt-field>
    <mt-field label="银行卡号" placeholder="请输入银行卡号" v-model="cardnumber"></mt-field>
    <mt-field label="银行名称" placeholder="请输入银行名称" v-model="cardname"></mt-field>
    <mt-radio
      title="银行卡类型"
      v-model="value"
      :options="options"
      >
    </mt-radio>

    <mt-button size='normal' @click='addInfo()'>确认</mt-button>
  </div>
</template>

<script>
  import {add_bank} from '@/api/';
  export default {
    data(){
      return{
        value:'1',
        username:'',
        cardnumber:'',
        cardname:'',
        cardtype:'',
        tel:'',
        options : [{
        		    label: '储蓄卡',
        		    value: '1'
        			},
        			{
        		    label: '信用卡',
        		    value: '2'
        			}]
      }
    },
    methods:{
      addInfo(){
        this.tel = JSON.parse(localStorage.getItem('tel'));
        var pattern = /^([1-9]{1})(\d{14}|\d{18})$/ ;//银行卡验证
        if(this.username == ''){
          this.$messagebox.alert('姓名不能为空！')
        }else if(this.cardnumber == ''){
          this.$messagebox.alert('银行卡号不能为空！')
        }else if(!pattern.test(this.cardnumber)){
          this.$messagebox.alert('请输入正确的银行卡号！')
        }else if(this.cardname == ''){
          this.$messagebox.alert('银行卡名称不能为空！')
        }else{
          add_bank({tel:this.tel,name:this.username,bank_no:this.cardnumber,bank_name:this.cardname,type:this.value}).then( res =>{
            if(res.status == 1){
              this.$router.push('/contract')
            }else if(res.status == 0){
              this.$messagebox.alert('银行卡添加失败！')
            }
          })
        }

      }
    },
    mounted() {
    }
  }
</script>

<style scoped>
 /deep/  .mint-cell:last-child{background-image: none;}
 /deep/ .mint-radiolist-title{font-size: 16px;line-height: 30px;color: #333;}
.mint-button{margin-left: 50%;transform: translateX(-50%);margin-top: 1em;width: 150px;border-radius: 20px;background-color: #2f3953;color: #fff;}
/deep/.mint-radiolist > *{float: left;}
/deep/.mint-radiolist .mint-cell-wrapper{background-image: none;}
</style>
